<template>
  <div class="search">
    <el-form :inline="true" :label-width="labelWidth" size="large">
      <el-row class="search-inner">
        <el-col :span="20">
          <el-row :gutter="5">
            <template v-for="item in formItems" :key="item.filed">
              <el-col v-bind="cloLayoutType">
                <el-form-item :label="item.label" :style="itemStyle">
                  <template v-if="item.type === 'input' || item.type === 'password'">
                    <el-input
                      :placeholder="item.placeholder"
                      :show-password="item.type === 'password'"
                      :model-value="modelValue[`${item.filed}`]"
                      @update:model-value="handleValueChange($event, item.filed)"
                    />
                  </template>
                  <template v-if="item.type === 'select'">
                    <el-select
                      v-if="item.showSearch"
                      :placeholder="item.placeholder"
                      v-bind="item.otherOptions"
                      :model-value="modelValue[`${item.filed}`]"
                      @update:model-value="handleValueChange($event, item.filed)"
                      @visible-change="visibleChange($event, item.options)"
                      popper-class="page-search-select"
                    >
                      <div class="search-input">
                        <el-input
                          type="text"
                          placeholder="请输入"
                          v-model="dropDownValue"
                          @keyup="dropDownSearch(item.options)"
                        />
                      </div>
                      <template #empty>
                        <div class="empty-search-input">
                          <el-input
                            type="text"
                            placeholder="请输入"
                            v-model="dropDownValue"
                            @keyup="dropDownSearch(item.options)"
                          />
                        </div>
                      </template>
                      <el-option
                        v-for="option in searchOptions"
                        :key="option.value"
                        :value="option.value"
                        :label="option.label"
                      />
                    </el-select>
                    <el-select
                      v-else
                      :placeholder="item.placeholder"
                      v-bind="item.otherOptions"
                      :model-value="modelValue[`${item.filed}`]"
                      @update:model-value="handleValueChange($event, item.filed)"
                    >
                      <el-option
                        v-for="option in item.options"
                        :key="option.value"
                        :value="option.value"
                        :label="option.label"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.type === 'datepicker'">
                    <el-date-picker
                      v-bind="item.otherOptions"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DDTHH:mm:ssZ[Z]"
                      popper-class="page-search-date-picker"
                      :model-value="modelValue[`${item.filed}`]"
                      @update:model-value="handleValueChange($event, item.filed)"
                      :shortcuts="shortcuts"
                    >
                      <template #default> </template>
                    </el-date-picker>
                  </template>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <el-col :span="4" class="btn"><slot></slot></el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="SearchForm">
import { FormItem, CloLayoutType, Options } from '../types'

// vue3 withDefaults 暂时不支持从外部引入 interface
interface IForm {
  modelValue: any
  labelWidth?: string
  formItems: FormItem
  cloLayoutType?: CloLayoutType
  itemStyle?: object
}

// 设置 props 默认值
const props = withDefaults(defineProps<IForm>(), {
  labelWidth: '100px',
  cloLayoutType: () => ({
    span: 8,
  }),
  itemStyle: () => ({
    padding: '0px',
  }),
  formData: () => ({}),
})

// 下拉框输入搜索
const dropDownValue = ref('')
const searchOptions = ref<Options[]>()

const visibleChange = (val: boolean, options: Options[]) => {
  if (val) searchOptions.value = options
  else dropDownValue.value = ''
}

const dropDownSearch = (options: Options[]) => {
  searchOptions.value = options.filter((item) => item.label.includes(dropDownValue.value))
}

// 更新数据传到父组件
const emit = defineEmits(['update:modelValue'])
const handleValueChange = (val: any, filed: string) => {
  emit('update:modelValue', { ...props.modelValue, [filed]: val })
}

// 日期组件
const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
]
</script>

<style scoped lang="scss">
@import '../index.scss';
</style>
